Using scroll layers

Scroll layer is a 2D input pane you can use to get user input from scroll gestures. You can use the scroll message with its parameters to, for example, move objects, such as a map in an image layer. To give a scroll layer a visual shape, you can add a layer (or hierarchy of layers) under the scroll layer. Unlike the other layout and UI components, scroll layer does not necessarily need visible content, but can instead work as an interactive surface.

The scroll layer reports changes of its scroll position through the Scroll View: Scrolled message. You can add triggers to react to these messages to, for example, set the position of an object according to the scrolling.

The scroll layer generates the same messages as the Scroll View, which you can use for 3D content. See Using scroll views.

Creating a scroll layer

To create a scroll layer:

1. Create the object you want to scroll.
   For example, create an Image Layer.
2. In the Project right-click the object where you want to create a scroll layer and select Create > Scroll Layer.
3. In the Properties click Add Triggers and in the Add Triggers window select one of the Scroll View messages you want to add to your scroll view.
   For example, select Scroll View: Scrolled.
4. In the Scroll View: Scrolled message click the Add drop-down menu and select one of the triggers.
   For example, select Set Property and set its properties:
   • Target Item to the object you want to control with the scroll view
     If you created an image layer in the beginning, select that image layer.
   • Target Property to Layer Layout Transformation
   • Target Property Attribute to the attribute you want to control with the scroll layer
     To scroll the object along the x axis, select Translation X.
   • Value From to From Message
   • Message to Position X
5. When you are done setting Set Property value settings, click Save.
   In the Preview you can now click and drag within the Scroll Layer object to move along the x axis the object you created, in this example, the image layer.

Setting the sensitivity of a scroll layer

If you want to scroll the target item of your scroll layer faster or slower, change its sensitivity.

To set the sensitivity of a scroll layer:

1. In the Project select the scroll layer for which you want to set the sensitivity.
2. In the Properties add Scroll Sensitivity property.
3. Adjust the slider of the property to change the sensitivity. The higher the number the more sensitive the scroll layer is.

Debugging a scroll layer

To test whether the scroll layer is working properly, add to a scroll layer trigger a Write Log trigger. Every time you use the scroll layer, Kanzi Studio writes a message to the Log window.

See also

Using scroll views

Layers

Open topic with navigation